iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

軟體開發商新手 PM 30 個第一次系列 第 3

【第 3 個第一次】 OMG !! jpg/ jpeg / png / svg / gif 的粗略差別.....

  • 分享至 

  • xImage
  •  

Day 3 - 自家設計師: 請客戶提供 SVG 好嗎?

自家工程師: 圖片格式要開哪幾種? jpg/ jpeg / png ,那 gif 呢???????

第一次聽到心想..天老爺,下意識「圖片」這件事情就是右鍵另存然後上傳,現在可能要跟客戶確認或是進一步解釋..到底哪裡不同呢呢呢呢呢呢呢/images/emoticon/emoticon16.gif

大家好,我是 Jade Chang
先前任職於科技外商,主要負責對於 Developers 的開發經驗體驗,過去 5-6 年出沒於技術社群以及大專院校。嘗試過直播節目、技術黑客松、帶狀節目系列以及線上短期活動等行銷策略,半年前轉職到台灣在地的軟體開發商,從事行銷與專案經理,也合夥新創了一間數位公司,超展開職涯要開始囉!!!

先來說說常看到的檔案格式

喔,實在是百百種圖片檔案儲存格式,今天只挑最常最常(普人) 大概會聽過的 4-5 種 ! 也偷偷看一下平常我自己存的圖片都是甚麼檔案類型,好像 png 多一點 XDDDD
https://ithelp.ithome.com.tw/upload/images/20200918/20094570IaepXiyNXA.png

jpg / jpeg 靜態影像格式,非向量

看了好多篇的資料,這兩個基本上都是被歸類在一起的,他們基本解釋 「有損壓縮」、「破壞性資料壓縮」,一種容量與質量之間可做調整的檔案儲存格式。

此檔案格式能保留較多的色彩,色彩還原度高,也就是說被壓縮後還能最接近原本的色彩飽和。不支援具有透明度的圖片也不支援動態呈現。

jpeg 常見的地方就是儲存照片的時候會看到的檔案格式,由於相機取得的照片都是飽滿色彩,相對來說 jpeg 比 jpg的檔案來的大,當中多儲存了相機拍攝時所設定的相關參數。

png 靜態影像格式,非向量

是採取「非破壞式的壓縮」方式,跟 jpg 相較之下支援「透明度」的呈現,製作網頁時經常會有圖片重疊或是交錯的擺放,使用具有透明度的 png 就能做出更多的疊層安排。

png 優勢在於可以處理文字、線條和輪廓,原因在於無損的壓縮方式,因次邊緣上的處理比 jpg 較為優勢。較常應用於色彩重複度高的圖片,如果圖片本身色彩豐富飽和,使用 png 會導致檔案變大,這時候就會建使用 jpg 來做儲存更為優先選擇。

好像還分 png-8/ png-24 / png-32 ..之類的不同,但實在是有複雜就略略略略略

svg 靜態影像格式,向量

可被縮放的向量圖型,他是計算圖片當中「點與點之間的距離」,所以不管被放大還是縮小,他都是靠絕對距離來作呈現,再透過這個絕對距離記錄這段裡面是甚麼顏色,使用者可以直接用程式碼來描繪影像,因此不會有失真模糊的情形出現。檔案體積也比 jpg / png 來的小,只對於多數來說好像 jpg / png 還是比較盛行。

gif 動態影像格式

特色在於可以儲存不只一張圖片且同時支持透明度的圖片,能儲存的顏色僅有 256 色,透過減色來達到檔案變小的效能,但是相對支持動態呈現。

阿網路上看到一張圖十足表示以上幾種檔案格式,看到真的會笑
https://ithelp.ithome.com.tw/upload/images/20200918/20094570i9vY1VvVbb.jpg

對於做網站而言

  • 希望圖片體積會小越好,避免造成 Loading 速度變長
  • 能是向量檔為優先,不受尺寸放大縮小而影響視覺體驗與網站整體品質

One more thing!

公司每周都有讀書會,紀錄每天讀到的精華給大家 Take Away
<<成長駭客行銷>> 大企業崩解,新創事業、應用程式與網站崛起,行銷必須小而美、必須改變優先順序。

歡迎訂閱我 Medium 或是透過 Facebook 一起來交流

https://ithelp.ithome.com.tw/upload/images/20200917/20094570vd9yTPSFZI.png


上一篇
【第 2 個第一次】套版網站與客製化網站的不同,我該怎麼選?
下一篇
【第 4 個第一次】RWD 與 AWD 的粗淺分析
系列文
軟體開發商新手 PM 30 個第一次30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言